<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>账号管理系统</title>
    <link href="css/user.css" rel="stylesheet">
    <script src="js/axios.min.js"></script>
    <script src="js/all.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="jsjs/user.js"></script>

</head>
<body>
<!-- 在user.html的<body>内顶部位置添加 -->
<button class="cyber-back-btn" onclick=back1()>
    <span class="glow-text">←</span> 返回主页
</button>
<div class="user-management-container">
    <h1>账号管理系统</h1>

    <!-- 账号统计卡片 -->
    <div class="user-stats-container">
        <div class="user-stat-card">
            <div class="stat-info">
                <h3>
                    <div class="stat-icon">
                        <i class="fas fa-user"></i>
                    </div>
                    账号个数
                    <div class="stat-number" id="normalUserCount">0</div>
                </h3>
            </div>
        </div>
    </div>

    <div id="ftype1">
        <button class="user-action-btn" onclick="toggleRegisterModal()">注册新账号</button>
    </div>

    <!-- 账号注册表单 -->
    <div class="modal" id="registerModal" style="display: none;">
        <div class="modal-content">
            <h3 style="color: #04040C">注册账号</h3>
            <div class="form-group">
                <label>账号：</label>
                <input id="unameInput" placeholder="请输入账号" type="text">
            </div>
            <div class="form-group">
                <label>密码：</label>
                <input id="upassInput" placeholder="请输入密码" type="password">
            </div>
            <div class="form-group">
                <label>权限设置：</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <label>数据处理<input id="permData" name="userPerm" type="radio" value="2"> </label>
                    </div>
                    <div class="radio-item">
                        <label>用户管理<input id="permManage" name="userPerm" type="radio" value="4"> </label>
                    </div>
                    <div class="radio-item">
                        <label>高级管理员<input id="permSuper" name="userPerm" type="radio" value="8"> </label>
                    </div>
                    <div class="radio-item">
                        <label>账号已冻结<input id="permFreeze" name="userPerm" type="radio" value="0"> </label>
                    </div>
                </div>
            </div>
            <div class="modal-buttons">
                <button onclick="zhuce()">提交</button>
                <button onclick="closeModal()">取消</button>
            </div>
        </div>
    </div>


    <!-- 账号管理表单 -->
    <div class="modal" id="manageModal" style="display: none;">
        <div class="modal-content">
            <h3 style="color: #04040C">账号权限管理</h3>
            <div class="form-group">
                <label style="color: #04040C">更改账号权限：</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <label>数据处理<input id="permDataSelect" name="userPerm" type="radio" value="2"> </label>
                    </div>
                    <div class="radio-item">
                        <label>用户管理<input id="permManageSelect" name="userPerm" type="radio" value="4"> </label>
                    </div>
                    <div class="radio-item" id="ftype">
                        <label>高级管理员<input id="permSuperSelect" name="userPerm" type="radio" value="8"> </label>
                    </div>
                    <div class="radio-item">
                        <label>冻结账号<input id="permFreezeSelect" name="userPerm" type="radio" value="0"> </label>
                    </div>
                </div>
            </div>
            <div class="modal-buttons">
                <button onclick="submitPermissionUpdate()">更改权限</button>
                <button onclick="closeManagelroot()">取消</button>
            </div>
        </div>
    </div>

    <!-- 账号修改表单 -->
    <div class="modal" id="modifyModal" style="display: none;">
        <div class="modal-content">
            <h3 style="color: #04040C">账号信息修改</h3>
            <div class="form-group">
                <label>修改类型：</label>
                <div>
                    <label>账号名<input id="updateUsername" name="updateType" type="radio" value="username"></label>
                    <label>密码<input id="updatePassword" name="updateType" type="radio" value="password"></label>
                </div>
            </div>
            <div class="form-group" style="display: none;">
                <label>修改对象ID：</label>
                <input id="modifyUserIdInput" readonly type="text">
            </div>
            <div class="form-group" id="newUnameContainer" style="display: none;">
                <label>新账号名：</label>
                <input id="newUnameInput" placeholder="请输入新账号名" type="text">
            </div>
            <div class="form-group" id="newUpassContainer" style="display: none;">
                <label>新密码：</label>
                <input id="newUpassInput" placeholder="请输入新密码" type="password">
            </div>
            <div class="modal-buttons">
                <button onclick="modifyUser()">提交</button>
                <button onclick="closeModifyModal()">取消</button>
            </div>
        </div>
    </div>

    <!-- 删除账号表单 -->
    <div class="modal" id="deleteModal" style="display: none;">
        <div class="modal-content">
            <h3 style="color: #04040C">删除账号</h3>
            <div class="modal-buttons">
                <button onclick="deleteUser()">确认删除</button>
                <button onclick="closeDeleteModal()">取消</button>
            </div>
        </div>
    </div>

    <!-- 账号列表 -->
    <div class="user-list">
        <h2>账号列表</h2>
        <div class="user-table-container" id="normalUserList"></div>
    </div>

</div>

</body>
</html>